<template>
    <div class="box-content">
        <div class="navigation">订单管理/行业列表</div>
        <!--搜索-->
        <div class="mt-3">
            <div>
                <!--<el-input-->
                        <!--class="mrt-10"-->
                        <!--style="width: 160px;"-->
                        <!--placeholder="请输入行业名"-->
                        <!--v-model="searchParams.name"-->
                        <!--clearable>-->
                <!--</el-input>-->
                <!--<el-button type="primary" @click="onSearch">查询</el-button>-->
                <el-button type="primary" class="mx-4" @click="openHangYe">新增</el-button>
            </div>
        </div>
        <!--表格-->
        <div class="mt-3">
            <el-table
                    :data="fileData"
                    v-loading="loading"
                    align="center"
                    :element-loading-text="loadText"
                    :header-cell-style="tableHeaderColor"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="序号"
                        align="center"
                        width="80"
                >
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="行业名称"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        align="center"
                >
                    <template slot-scope="scope">
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        width="160"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-3 float-right">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.current_page"
                        :page-size="pageInfo.per_page"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="dialog.title"
                   :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false"
                   width="600px">
            <el-form :model="form" :rules="rules" ref="form" label-width="80px" v-loading="loadingDialig">
                <el-form-item label="行业名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入行业名" style="width: 450px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-if="!dialog.isEdit" :loading="loadingCreate" @click="submitCreat('form')">{{loadingCreate?'添加中':'点击添加'}}</el-button>
                <el-button type="primary" v-if="dialog.isEdit"  :loading="loadingCreate" @click="submitCreat('form')">{{loadingCreate?'修改中':'点击修改'}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "BoxList",
        data() {
            return {
                searchParams: {
                    name: ''
                },
                loading:false,
                loadingDialig:false,
                loadingCreate:false,
                loadText:'数据加载中',
                searchStr:'',
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1,
                },
                fileData: [],
                dialogFormVisible: false,
                baseId:null,
                form: {
                    name:''
                },
                rules: {
                    name: [
                        {required: 'true', message: '请输入行业名', trigger: 'change'}
                    ]
                },
                dialog: {
                    title: '',
                    isEdit: false
                }
            }
        },
        watch: {
            dialogFormVisible:function (val) {
                if (!val) {
                    Object.keys(this.form).forEach(key => this.form[key] = '');
                    this.$refs['form'].resetFields();
                }
            }
        },
        created() {
            this.getFileList();
        },
        methods: {
            getFileList() {
                this.loading = true;
                this.$http.get('api/admin/common/type' + this.searchStr,{
                    params: {
                        pageSize: this.pageInfo.per_page,
                        page: this.pageInfo.current_page
                    }
                })
                    .then((result)=>{
                        this.fileData = result.data;
                        this.pageInfo.total = result.meta.total;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            onSearch() {
                this.searchStr = "";
                if (this.searchParams.name) {
                    this.addConStr();
                    this.searchStr+=`name=${this.searchParams.name}`;
                }
                this.pageInfo.current_page = 1;
                this.getFileList();
            },
            addConStr() {
                if (this.searchStr.length > 0) {
                    this.searchStr += '&';
                } else {
                    this.searchStr += '?';
                }
            },
            openHangYe(){
                this.dialog.title = '添加行业';
                this.dialog.isEdit = false;
                this.dialogFormVisible = true;
            },
            submitCreat(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.creatHangYe();
                    } else {
                        return false;
                    }
                });
            },
            creatHangYe(){
                this.loadingCreate = true;
                let params;
                params={
                    type: this.form.name
                };
                if (this.dialog.isEdit) {
                    this.$http.put('api/admin/common/type/' + this.baseId, params)
                        .then((result) => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!',
                                during:1000
                            });
                            this.dialogFormVisible = false;
                            this.loadingCreate = false;
                            this.getFileList();
                        })
                        .catch((err) => {
                            this.loadingCreate = false;
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                } else {
                    this.$http.post('api/admin/common/type', params)
                        .then((result) => {
                            this.$message({
                                type: 'success',
                                message: '注册成功!',
                                during:1000
                            });
                            this.dialogFormVisible = false;
                            this.loadingCreate = false;
                            this.getFileList();
                        })
                        .catch((err) => {
                            this.loadingCreate = false;
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                }

            },
            handleEdit(val) {
                this.baseId = val.id;
                this.dialog.title = '编辑行业';
                this.dialog.isEdit = true;
                this.dialogFormVisible = true;
                this.loadingDialig = true;
                this.$http.get('api/admin/common/type/' + val.id)
                    .then((result) => {
                        this.form.name = result.data.type;
                        this.loadingDialig = false;
                    })
                    .catch((err) => {
                        this.loadingDialig = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            handleDelete(val){
                this.$confirm('此操作将永久删除此记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete('api/admin/common/type/' + val.id)
                        .then((result) => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                                during:1000
                            });
                            this.getFileList();
                        })
                        .catch((err) => {
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                }).catch(() => {
                });
            },
            submitCostomer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleSizeChange(val) {
                this.pageInfo.current_page = 1;
                this.pageInfo.per_page = val;
                this.getFileList();
            },
            handleCurrentChange(val) {
                this.pageInfo.current_page = val;
                this.getFileList();
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            },
        }
    }
</script>

<style scoped>
</style>